<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器 - 注册</title>

    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        neutral: '#f3f4f6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1), 0 8px 10px -6px rgba(99, 102, 241, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen p-4">
<!-- 增加外层容器确保居中 -->
<div class="flex items-center justify-center min-h-screen w-full">
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 overflow-hidden -z-10">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary/20 rounded-full blur-3xl"></div>
    </div>

    <!-- 注册卡片 -->
    <div class="w-full max-w-md">
        <div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-300 hover:scale-[1.01]">
            <!-- 标题区域 -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-custom text-white mb-4">
                    <i class="fa fa-user-plus text-2xl"></i>
                </div>
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">音乐服务器</h1>
                <p class="text-gray-500 mt-1">创建您的账号</p>
            </div>

            <!-- 表单区域 -->
            <form>
                <!-- 用户名输入 -->
                <div class="mb-5">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-user"></i>
                        </div>
                        <input
                                type="text"
                                name="username"
                                id="username"
                                placeholder="请输入用户名"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 新增：用户昵称输入 -->
                <div class="mb-5">
                    <label for="nickname" class="block text-sm font-medium text-gray-700 mb-1">用户昵称</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-id-badge"></i>
                        </div>
                        <input
                                type="text"
                                name="nickname"
                                id="nickname"
                                placeholder="请输入昵称(可选)"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 邮箱输入 -->
                <div class="mb-5">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-envelope"></i>
                        </div>
                        <input
                                type="email"
                                name="email"
                                id="email"
                                placeholder="请输入邮箱"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="mb-5">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input
                                type="password"
                                name="password"
                                id="password"
                                placeholder="请输入密码"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 确认密码输入 -->
                <div class="mb-6">
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input
                                type="password"
                                name="confirmPassword"
                                id="confirmPassword"
                                placeholder="请再次输入密码"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 错误提示框 -->
                <div class="mb-6 hidden" id="errorAlert">
                    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center">
                        <i class="fa fa-exclamation-circle mr-2"></i>
                        <span id="errorMessage">请检查您的输入</span>
                    </div>
                </div>

                <!-- 注册按钮 -->
                <button
                        type="button"
                        id="submit"
                        class="w-full bg-gradient-custom text-white font-medium py-3 px-4 rounded-lg transition-all hover:shadow-lg hover:shadow-primary/30 active:scale-98"
                >
                    注册
                </button>
            </form>

            <!-- 额外链接 -->
            <div class="mt-6 text-center text-gray-500 text-sm">
                <a href="login.html" class="hover:text-primary transition-colors">已有账号? 立即登录</a>
            </div>
        </div>

        <!-- 页脚 -->
        <p class="text-center text-gray-500 text-xs mt-6">
            &copy; 2025 音乐服务器 | 现代音乐体验
        </p>
    </div>
</div>

<!-- 引入jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>

<!-- 注册逻辑 -->
<script>
    $(function(){
        $("#submit").click(function(){
            var username = $("#username").val();
            var nickname = $("#nickname").val(); // 获取昵称值
            var email = $("#email").val();
            var password = $("#password").val();
            var confirmPassword = $("#confirmPassword").val();

            // 验证用户名
            if(username.trim() === "") {
                showError("用户名不能为空");
                return;
            }

            // 验证邮箱
            if(email.trim() === "") {
                showError("邮箱不能为空");
                return;
            } else if(!validateEmail(email)) {
                showError("请输入有效的邮箱地址");
                return;
            }

            // 验证密码
            if(password.trim() === "") {
                showError("密码不能为空");
                return;
            } else if(password.length < 6) {
                showError("密码长度至少为6位");
                return;
            }

            // 验证确认密码
            if(confirmPassword.trim() === "") {
                showError("请确认密码");
                return;
            } else if(password !== confirmPassword) {
                showError("两次输入的密码不一致");
                return;
            }

            // 隐藏错误提示
            $("#errorAlert").addClass("hidden").removeClass("block");

            // 模拟注册请求
            $.ajax({
                url:"/user/register",
                data:{
                    "username": username,
                    "nickname": nickname, // 添加昵称参数
                    "email": email,
                    "password": password,
                    "confirmPassword": confirmPassword
                },
                type:"POST",
                dataType:"json",
                success:function(data) {
                    console.log(data);
                    if(data.status == 0) {
                        alert("注册成功！请登录");
                        window.location.href="login.html";
                    } else {
                        showError(data.message || "注册失败，请稍后重试");
                    }
                },
                error:function() {
                    showError("网络错误，请稍后重试");
                }
            });
        });


        function showError(message) {
            $("#errorMessage").text(message);
            $("#errorAlert").removeClass("hidden").addClass("block");
        }

        function validateEmail(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
    });
</script>
</body>
</html>
